<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点我</button>
    <script>
      // let arr = [
      //   { id: 1, title: 1, prent_id: 0 },
      //   { id: 2, title: 2, prent_id: 0 },
      //   { id: 3, title: 3, prent_id: 0 },
      //   { id: 4, title: "1-1", prent_id: 1 },
      //   { id: 5, title: "2-2", prent_id: 2 },
      //   { id: 6, title: "2-1", prent_id: 2 },
      //   { id: 7, title: "3-1", prent_id: 3 },
      //   { id: 8, title: "1-2", prent_id: 1 },
      //   { id: 9, title: "1-1-1", prent_id: 4 },
      // ];
      // //关键思路 要建立一个map对象结构,将要处理的数组的id作为map的key 之后遍历原数组,如果map[prent_id]这一项存在 则表示找到了父级
      // function getTree(array) {
      //   let result = [];
      //   //获取一个key和value的键值对, key为id,value为其余的属性
      //   let map = array.reduce((pre, cur) => {
      //     //吧第0级目录提取出来
      //     pre[cur.id] = cur;
      //     return pre;
      //   }, {});
      //   // console.log(map);
      //   for (const value of array) {
      //     //先处理一级目录
      //     if (value.prent_id == 0) {
      //       result.push(value);
      //       continue;
      //     }

      //     if (value.prent_id in map) {
      //       let prent = map[value.prent_id];
      //       prent.child = prent.child || [];
      //       prent.child.push(value);
      //     }
      //   }

      //   return result;
      // }
      // let res = getTree(arr);
      // // console.log(getTree(arr));

      // //讲树状结构 扁平化
      // //原理解构属性 扁平化数组

      // function getArr(array) {
      //   return array.reduce((pre, cur) => {
      //     const { id, title, prent_id, child = [] } = cur;
      //     return pre.concat({ id, title, prent_id }, getArr(child));
      //   }, []);
      // }

      // console.log(getArr(res));

      // 先转成map存储

      // console.log(itemMap);
      // for (const item of items) {
      //   const id = item.id;
      //   const pid = item.pid;
      //   const treeItem = itemMap[id];
      //   if (pid === 0) {
      //     result.push(treeItem);
      //     console.log(itemMap);
      //   } else {
      //     // console.log(itemMap[pid]);
      //     if (!itemMap[pid]) {
      //       itemMap[pid] = {
      //         children: [],
      //       };
      //     }
      //     itemMap[pid].children.push(treeItem);
      //   }
      // }
      let arr = [
        { id: 1, name: "部门1", pid: 0 },
        { id: 2, name: "部门2", pid: 1 },
        { id: 3, name: "部门3", pid: 1 },
        { id: 4, name: "部门4", pid: 3 },
        { id: 5, name: "部门5", pid: 4 },
        { id: 6, name: "部门6", pid: 6.5 },
      ];

      function tree(arr) {
        let result = [];
        //用于储存arr中的数据 查询他的父级结构
        let map = new Map();

        for (const item of arr) {
          //如果item[pid]在map中存在
          if (map.has(item["pid"])) {
            //判断对应父级目录是否存在child属性
            if (!map.get(item["pid"]).child) {
              //不存在则要创造一个child赋值属性为数组
              map.get(item["pid"]).child = [];
            }
            let sunObj = new Object(item);
            sunObj.parent = map.get(item["pid"]).name;
            map.get(item["pid"]).child.push(sunObj);
            map.set(item.id, sunObj);
            //0级目录中可能含有其他目录
          } else if (!map.has(item["pid"]) && item.pid === 0) {
            let treeObj = new Object(item);
            result.push(treeObj);
            //添加进map便于之后做父级目录的查询
            map.set(item.id, treeObj);
          } else {
            //如果都不满足属于三界之外
            result.push(item);
          }
        }
        return result;
      }
      console.log(tree(arr));

      // document.querySelector("button").addEventListener(
      //   "click",
      //   debonce(function (e) {
      //     console.log(e);
      //   }, 2000)
      // );
      // function debonce(fn, timer) {
      //   let This = this;

      //   let olddate = 0;
      //   return function (...arg) {
      //     let nowTime = Date.now();
      //     if (nowTime - olddate < timer) {
      //       console.log(1);

      //       return;
      //     }
      //     olddate = nowTime;
      //     fn.apply(This, [...arg]);
      //   };
      // }
    </script>
  </body>
</html>
